import Popup from "@/components/Popup/Popup";
import { message } from "ant-design-vue";
import to from "await-to-js";
import { defineComponent, reactive, ref } from "vue";
import styles from "./Add.module.less";


export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  emits: ['change'],
  setup(props, { expose, emit }) {
    const addPopupRef = ref(null as any);
    const formRef = ref(null as any);
    const adding = ref(false);
    const state = reactive({
      type: '',
      form: {
        id: null,
        name: null,
        placeholder: null,
        sort: null,
        status: 0,
      }
    })

    const getDetail = async () => {
      const [err, res]: any = await to(props.service?.detail(state.form.id))
      if (!err) {
        state.form.name = res.data?.data?.name || '';
        state.form.placeholder = res.data?.data?.placeholder || '';
        state.form.sort = res.data?.data?.sort || '';
        state.form.status = res.data?.data?.status || 0;
      }
    }

    const submit = async () => {
      adding.value = true;
      const [err, res]: any = await to((state.type === 'add' ? props.service?.add : props.service?.edit)(state.form));
      if (!err) {
        message.success('操作成功');
        emit('change');
        addPopupRef.value.close();
      }
      adding.value = false;
    }

    const open = async ({ type, id }) => {
      state.type = type;
      state.form.id = id;
      if (type === 'edit') {
        await getDetail()
      }
      addPopupRef.value.open();
    }
    expose({
      open
    })
    return () => (
      <Popup
        ref={addPopupRef}
        title={state.type === 'add' ? '添加留言分类' : '编辑留言分类'}
        width="700px"
        oriState={state}
      >
        <div class={styles.container}>
          <div class={styles.formBox}>
            <a-form style={{ width: "100%" }} ref={formRef} model={state.form} label-col={{ style: { width: '130px', marginRight: '10px' } }} wrapper-col={{ span: 18 }}>
              <a-form-item label="分类名称" required name="name">
                <a-input v-model:value={state.form.name} placeholder="请输入分类名称" />
              </a-form-item>
              <a-form-item label="分类提示" required name="placeholder">
                <a-input v-model:value={state.form.placeholder} placeholder="请输入分类提示" />
              </a-form-item>
              <a-form-item label="排序" name="sort">
                <a-input-number min={0} v-model:value={state.form.sort} placeholder="请输入排序" />
              </a-form-item>
              <a-form-item label="状态" name="sort">
                <a-radio-group
                  v-model:value={state.form.status}
                  name="radioGroup"
                >
                  <a-radio value={0}>开启</a-radio>
                  <a-radio value={1}>关闭</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </div>
          <div class={styles.footer}>
            <a-button type="primary" loading={adding.value} onClick={() => { submit() }}>确定</a-button>
            <a-button onClick={() => { addPopupRef.value.close() }} style={{ marginLeft: '20px' }}>取消</a-button>
          </div>
        </div>
      </Popup>
    )
  }
})